<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas</title>
		<style>
			canvas{
				border: 1px solid #000;
				margin: 50px;
			}
			div{
				width: 200px;
				height: 200px;
				transform: rotate(0deg);
				transform-origin: left top;
				background-color: red;
			}
		</style>
	</head>
	<body>
<!--		<div></div>-->
		<canvas id="draw" width="500" height="500">
			<div>您的浏览器版本太低,请更换浏览器</div>
		</canvas>


		<script>
			let canvas = document.querySelector('canvas')
			console.log(canvas.getContext);
			if(canvas.getContext){
				var ctx  = canvas.getContext('2d')
			}

			let hd = Math.PI/180
			ctx.beginPath()
			// ctx.rotate(5*hd)
			ctx.scale(2,2)
			ctx.translate(50,50)
			ctx.moveTo(50,50)
			ctx.lineTo(50,300)
			ctx.stroke()




		</script>
		<!--

		 一、canvas 的基本知识
		 HTML5 中 新增了 <canvas> 元素。<canvas> 元素负责在页面中设定一个区域，
		 然后就可以通过 JavaScript 动态的在这个区域内绘制图形。
		 
		二、绘制 2D 图形
		 1、创建画布
		 使用 canvas 绘图必须先设置其 width 和 height 属性，来指定一个可以绘图的区域大小。
		 <canvas id="draw" width="200" height="200"></canvas>
		 注:  属性设置了宽高 css就不要设置  不然容易将画布压缩变形
		 2、创建画笔
		 要在画布上绘图，需要通过调用 getContext(）取得绘图上下文对象。
		 var drawing = document.getElementById("draw");
		 if(drawing.getContext){
		 	var context = drawing.getContext("2d");
		 }
		 在使用Canvas前，用 canvas.getContext 来测试浏览器是否支持Canvas
		 
		 如果不支持 可以 在 标签内嵌套一个替换标签
		 <canvas id="draw" width="200" height="200">
		 	<div>换个浏览器把</div>
		 </canvas>
		 
		 3、绘制路径
		 	// 开始绘制路径 --创建一支笔
		 	ctx.beginPath();
		 	moveTo(x, y) 方法：将绘图游标移动到（x, y）处，不画线。
		 	lineTo(x, y) 方法：从上一点开始绘制一条直线，到（x, y）为止。
		 	rect(x, y, width, height) 方法：从点（x, y）开始绘制一个矩形，宽度和高度分别是 width 和 height。
		 	arc(x, y, radius, startAngle, endAngle, counterclockwise) 方法：以（x, y）为圆心，绘制一条弧线。弧线半径为 radius。
			      起始和结束的角度（用弧度表示）分别为 startAngle 和 endAngle。counterclockwise 用来指定绘制的方向，默认值是 false，
				  表示按顺时针方向绘制路径。
		 	arcTo(x1, y1, x2, y2, radius) 方法：从上一点开始绘制一条路径，到（x2, y2）为止，并且以给定的半径 radius 穿过（x1, y1）。
		 	bezierCurveTo(c1x, c1y, c2x, c2y, x, y) 方法：从上一点开始绘制一条路径，到（x, y）为止，
			并且以（c1x, c1y）和（c2x, c2y）为控制点。绘制一个贝塞尔曲线
				https://cubic-bezier.com/
		 	quadraticCurveTo(cx, cy, x, y) 方法：从上一点开始绘制一条二次曲线，到（x, y）为止，并且以（cx, cy）作为控制点。
				https://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
			ellipse( x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise )
				-x : 椭圆中心点的 x 轴坐标
				-y : 椭圆中心点的 y 轴坐标
				-radiusX : 椭圆在 x 轴方向上的半径
				-radiusY : 椭圆在 y 轴方向上的半径
				-rotation : 旋转弧度
				-startAngle : 弧线开始弧度
				-endAngle : 弧线结束弧度
				-antiClockwise : 方向, false 表示逆时针绘制(默认), true 表示顺时针绘制
		 	closePath() 方法：将路径与起点相连，形成封闭图形。
		 	fillStyle 属性：用来设置填充封闭图形的背景颜色。
		 	strokeStyle 属性：用来设置路径的颜色。
		 	stroke() 方法：用来给路径描边。
		 	fill() 方法 填充 路径
			
		
		
		4. 设置阴影
			设置阴影颜色
			ctx.shadowColor = 'red'
			设置阴影模糊成都
			ctx.shadowBlur = 20
			设置阴影 x 轴方向偏移量
			ctx.shadowOffsetX = 50
			设置阴影 y 轴方向偏移量
			ctx.shadowOffsetY = 50
		
		5. 开始绘制文本
			//准备一段要绘制的文本内容
			const text = '天青色等烟雨'
			//设置字体内容
			// 语法: 工具箱.font = '字号大小 字体'
			ctx.font = '30px Arial'  住:文字大小 跟文字体必须都有
			//设置描边颜色
			ctx.strokeStyle = '#000'
			//绘制描边字体
			// 语法: 工具箱.strokeText( 文本, 文本开始 X 坐标, 文本开始 Y 坐标,可选参数文字最大宽度超过就压缩 )
			ctx.strokeText(text, 100, 100)
			ctx.textAlign = 'center'
				//start ： 默认, 文本在指定的位置开始
				//end ： 文本在指定的位置结束
				//center ： 文本的中心被放置在指定的位置
				//left ： 文本左对齐
				//right ： 文本右对齐
				//注意 : 这里指定的值是指你在使用 fillText 或者 strokeText 时设置的 x 轴坐标位置
			ctx.testBaseline= 'alphabetic'
				//alphabetic：默认，文本基线是普通的字母基线
				//top：文本基线是 em 方框的顶端
				//hanging：文本基线是悬挂基线
				//middle：文本基线是 em 方框的正中
				//ideographic： 文本基线是 em 基线
				//bottom：文本基线是 em 方框的底端
			//设置填充颜色
			ctx.fillStyle = 'skyblue'
			//绘制填充字体
			//语法: 工具箱.fillText( 文本, 文本开始 X 坐标, 文本开始 Y 坐标 )
			ctx.fillText(text, 100, 220)
			//获取文字信息
			const textInfo = ctx.measureText(text)
			console.log(textInfo) // 完整字体信息
			console.log(textInfo.width) // 字体在画布上所占据的宽度
		6.绘制图片
		const myImg = new Image()
		myImg.sec = './01小锋.png'
		// 准备一个加载完毕的事件
		myImg.onload = function () {
		    ctx.drawImage( this, 100, 100, 236, 368 ) //drawImage( img, x, y, width, height ,cx,cy,cw,ch )
		}
		//drawImage(image，sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)；
		//image：image是画布绘制的图像源，绘制到画布上的元素，可以是canvasElement,imageElement,svgImageElement ,videoElement等一系列具有图像的元素。
		//sx：绘制裁剪的图像源的x 坐标位置；
		//sy：绘制裁剪的图像源的y坐标位置；
		//sWidth：绘制裁剪的图像源的宽度；
		//sHeight：绘制裁剪的图像源的高度；
		//dx：目标源在canvas画布上绘制的左上角的x坐标；
		//dy：目标源在canvas画布上绘制的左上角的y坐标；
		//dWidth：目标源在canvas画布上绘制的宽度，会自动根据图像源截取的宽度对比做缩放；
		//dWidth：目标源在canvas画布上绘制的高度，会自动根据图像源截取的高度对比做缩放；
		
		
			
		 7、绘制属性
		 fillStyle 属性：设置填充的背景颜色。不设置默认黑色
		 fill+形状api可以直接 绘制形状 
		 例如   fillRect(x, y, width, height) 绘制矩形
		 
		 strokeStyle 属性：设置边框颜色。不设置默认黑色
		 stroke+形状 可以直接绘制形状路径
		 注意:一个当我们设置了颜色 之后画任何东西 都是这个颜色 知道我们修改颜色
		 例如  strokeRect(x, y, width, height)  绘制矩形边框
		 
		 clearRect(x, y, width, height) 方法：从点（x, y）开始清除一个宽度和高度分别为 width 和 height 的矩形区域。清除后的区域是透明的。	
		
		lineWidth 线段宽度  默认1 
		示例 ctx.lineWidth = 1
		lineCap 线段两端 
			butt	默认。向线条的每个末端添加平直的边缘。
			round	向线条的每个末端添加圆形线帽。增长线段
			square	向线条的每个末端添加正方形线帽。增长线段
		示例lineCap = 'butt'
		setLineDash 绘制虚线  
		示例  setLineDash([5,10])   数组里面可以 放入多个数字 设置[实线长度,虚线长度....]
		
		save：用来保存最近一次的Canvas的状态和属性。
			保存的只是CanvasRenderingContext2D对象的状态以及对象的所有属性，并不包括这个对象上绘制的图形
		restore：用来获取save保存的Canvas之前的状态和属性。
			防止save后对Canvas执行的平移、放缩、旋转、错切、裁剪等可以改变画布的操作对后续的绘制的影响。 
		
		8.canvas 中的变换矩阵
			transform(a, b, c, d, dx, dy) 方法是将当前的变换矩阵乘上参数的矩阵：
			a：水平方向的缩放 默认1
			b：水平方向的倾斜偏移 默认0
			c：竖直方向的倾斜偏移 默认0
			d：竖直方向的缩放 默认1
			dx：水平方向的移动 默认0
			dy：竖直方向的移动 默认0
			
			根据矩阵公式，我们来看下 translate()、rotate()、scale() 等方法与 transform() 对应的关系：
			
			①平移：上面示例也讲了，translate(x, y) 对应的是 transform(1, 0, 0, 1, x, y)；
			②旋转：旋转 a 弧度，可使用下面两种方法复制代码
				let a;
				let sin = Math.sin(a);
				let cos = Math.cos(a);
				ctx.rotate(a);
				// 等同
				ctx.transform(cos, sin, -sin, cos, 0, 0);
			③缩放：scale(x, y) 等同于 transform(x, 0, 0, y, 0, 0)。
			④偏斜：即类似 CSS3 中的 skew(x, y) 方法。
				let x = Math.PI / 6;
				let y = Math.PI / 3;
				let tanx = Math.tan(x);
				let tany = Math.tan(y);
				ctx.transform(1, tanx, tany, 1, 0, 0);
			注:transform 所有的改变都是针对画板
			
			
			
		 -->

	</body>
</html>